{include file="public/header" /}
<body class="bgc hide-top">
<div class="pro-list-search">
    <i class="layui-icon layui-icon-left" onclick="goBack()"></i>
    <div class="rgt">
        <img src="/static/index/img/icon43.png" alt="">
        <input type="text" id="keyword" placeholder="请输入商品关键字搜索" autocomplete="off" value="{$keyword?:''}">
        <p class="flex-center search_bt">搜索</p>
    </div>
</div>
<ul class="pro-list-nav">
    <li class="active" data-filed="" data-sort="">
        <div>综合</div>
        <p></p>
    </li>
    <li data-filed="vip_price" data-sort="">
        <div>价格
            <p class="flex-center">
                <img src="/static/index/img/icon40.png" class="check-sort" alt="">
            </p>
        </div>
        <p></p>
    </li>
    <li data-filed="sales" data-sort="">
        <div>销量
            <p class="flex-center">
                <img src="/static/index/img/icon40.png" class="check-sort" alt="">
            </p>
        </div>
        <p></p>
    </li>
</ul>
<ul class="index-list tpl_list"></ul>
</body>
{include file="public/footer" /}
<script id="template" type="text/html">
    {{# for(var i = 0; i < d.data.length; i++) { }}
    <li>
        <a href="{:url('product/details')}?id={{d.data[i].id}}">
            <p class="flex-center">
                <img lay-src="{{d.data[i].icon}}" src="{{d.data[i].icon}}" alt="">
            </p>
            <div>
                <p class="multi">{{d.data[i].title}}</p>
                <p class="price">￥<span>{{d.data[i].vip_price}}</span></p>
                <p class="flex-layout"><span>￥{{d.data[i].price}}</span>销量{{d.data[i].sales}}</p>
            </div>
        </a>
    </li>
    {{# } }}
</script>
<script>
    $(function () {
        getFlow('', "{:url('product/getList')}?cate_1={$cate_1?:''}&keyword={$keyword?:''}");
        $(".search_bt").click(function () {
            var keyword = $("#keyword").val(), filed = $(".pro-list-nav .active").attr('data-filed'), sort = $(".pro-list-nav .active").attr('data-sort');
            if (!keyword) {
                layer.msg('请输入要搜索的内容');
                return false;
            }
            $(".tpl_list").empty();
            getFlow('', "{:url('product/getList')}?cate_1={$cate_1?:''}&keyword=" + keyword + "&filed=" + filed + "&sort=" + sort);
        });
        $(".pro-list-nav li").click(function () {
            var filed = $(this).attr('data-filed'), sort = $(this).attr('data-sort'), keyword = $("#keyword").val();
            if (filed) {
                if (sort === '' || sort === 'asc') {
                    sort = 'desc';
                    $(this).find('.check-sort').attr('src', '/static/index/img/icon41.png');
                } else {
                    sort = 'asc';
                    $(this).find('.check-sort').attr('src', '/static/index/img/icon42.png');
                }
                $(this).attr('data-sort', sort);
            }
            $(this).siblings().find('.check-sort').attr('src', '/static/index/img/icon40.png');
            $(this).siblings().attr('data-sort', '');
            $(this).addClass('active').siblings().removeClass('active');
            $(".tpl_list").empty();
            getFlow('', "{:url('product/getList')}?cate_1={$cate_1?:''}&keyword=" + keyword + "&filed=" + filed + "&sort=" + sort);
        });
    });
</script>
</html>